<template>
  <div class="operate-import">
      <a-select
        slot="right"
        class="select"
        v-model="selectYear"
        style="width: 120px"
        @change="handleChange"
      >
        <a-select-option :value="item" v-for="(item,index) in yearList" :key="index">
          {{item}}
        </a-select-option>
      </a-select>
      <ul class="tabs">
        <li
          v-for="(item, index) in tabList"
          :key="index"
          @click="changeTab(index)"
          :class="[currentIndex === index ? 'active' : '']"
        >
          <img :src="currentIndex === index ? item.ac_Img : item.img" alt="" />
          <span>
            <p>{{ item.title }}</p>
            <p>{{ item.name }}</p>
          </span>
        </li>
      </ul>
      <div class="table-box">
        <!-- <universal-table
          :loading="loading"
          :columns="columns"
          @getData="getOverview"
          :data="dataList"
          rowKey="id"
          bordered
        > -->
          <div slot="edit" slot-scope="text, record" class="table-edit">
            <span @click="downloadTemplate(record.id, record.dataType)">模板下载</span>
            <span @click="handle(record, (title = '上传'))">上传 </span>
            <span @click="handle(record, (title = '导出'))" :class="[record.progress.length > 0 ? '' : 'noClick']">导出</span>
            <span @click="handle(record, (title = '删除'))" :class="[record.progress.length > 0 ? '' : 'noClick']">删除</span>
          </div>
          <template slot="progress" slot-scope="text, record">
            <ul class="timeList" v-if="currentIndex !== 2">
              <li
                v-for="(item, index) in tableData"
                :class="[record.progress.includes(item) ? 'activeLi' : '']"
                :key="index"
              >
                {{ item }}
              </li>
            </ul>
            <p v-else :class="['active', record.progress.length > 0 ? 'activeLi' : '']">
              {{ tableData[record.progress.length] }}
            </p>
          </template>
        <!-- </universal-table> -->
        <operateModal @update="update" :isShow1.sync="isShow" :titleModel="titleModel" :record="record" :visible.sync="visible" :selectYear="selectYear" :currentIndex="currentIndex"></operateModal>
      </div>
  </div>
</template>

<script>
import operateModal from './operateModal'
// import { getOverview, templateDownload } from '@/api/System/Data/dataUpload'

export default {
  name: 'operateImport',
  props: {},
  components: {
    operateModal
  },
  data () {
    return {
      flag: true,
      isShow: false,
      record: {},
      loading: false,
      // selectYear: new Date().getFullYear(),
      selectYear: 2020,
      visible: false,
      titleModel: '模板下载',
      paramObj: {
        0: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        1: [1, 2, 3, 4],
        2: { 1: '是', 0: '否' }
      },
      currentIndex: 0,
      tabList: [
        {
          img: require('./img/icon_month.png'),
          ac_Img: require('./img/icon_month_active.png'),
          title: '月度数据',
          name: '每月更新一次'
        },
        {
          img: require('./img/icon_quarter.png'),
          ac_Img: require('./img/icon_quarter_active.png'),
          title: '季度数据',
          name: '每季更新一次'
        },
        {
          img: require('./img/icon_year.png'),
          ac_Img: require('./img/icon_year_active.png'),
          title: '年度数据',
          name: '每年更新一次'
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          width: '10%',
          align: 'center',
          fontSize: 'bold',
          customRender: (text, record, index) => {
            return 1 + index
          }
        },
        {
          title: '数据类别',
          dataIndex: 'dataType',
          width: '25%',
          align: 'center'
        },
        {
          title: '是否更新（蓝色为更新月份）',
          // dataIndex: 'progress',
          width: '35%',
          align: 'center',
          scopedSlots: { customRender: 'progress' }
        },
        {
          title: '操作',
          dataIndex: '操作',
          width: '30%',
          align: 'center',
          scopedSlots: { customRender: 'edit' }
        }
      ],
      dataList: [],
      timeArr: []
    }
  },
  created () {
    this.getOverview()
  },
  mounted () {},
  computed: {
    tableData () {
      return this.paramObj[this.currentIndex]
    },
    yearList () {
      // const year = new Date().getFullYear();
      const year = 2020
      const arr = []
      for (let i = 2015; i <= year; i++) {
        arr.push(i)
      }
      return arr
    }
  },
  watch: {},
  methods: {
    update () {
      this.getOverview()
    },
    getOverview () {
      this.loading = true
      // getOverview({
      //   year: this.selectYear,
      //   type: this.currentIndex + 1
      // }).then((res) => {
      //   this.loading = false
      //   this.dataList = res
      // })
    },
    // 下载模版
    downloadTemplate (id, name) {
      // templateDownload({
      //   id
      // }).then((res) => {
      //   const elink = document.createElement('a')
      //   const type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
      //   elink.href = window.URL.createObjectURL(new Blob([res], { type }))
      //   elink.setAttribute('download', name)
      //   document.body.appendChild(elink)
      //   elink.click()
      //   window.URL.revokeObjectURL(elink.href) // 释放URL 对象
      //   document.body.removeChild(elink)
      // })
    },
    changeTab (index) {
      this.currentIndex = index
      this.getOverview()
    },
    // 上传 \导出 \删除
    handle (record, title) {
      this.record = {}
      this.record = record
      this.record.progress.sort(function (a, b) { return a - b })
      this.titleModel = title
      this.visible = true
    },
    handleChange () {
      this.getOverview()
    }
  }
}
</script>

<style lang="scss" scoped>
.operate-import {
  .tabs {
    display: flex;
    justify-content: space-between;
    li {
      width: 280px;
      height: 60px;
      border-radius: 7px;
      border: 1px solid #a2a2a2;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      img {
        width: 34px;
        margin-right: 9px;
      }
      span {
        p {
          margin: 0;
          color: #182838;
        }
        > p:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }
        > p:nth-child(2) {
          font-size: 12px;
          // pointer-events: none;
          // pointer-events: ;
        }
      }
    }
    li.active {
      border: 1px solid rgba(52, 130, 255, 1);
      p {
        color: rgba(52, 130, 255, 1);
      }
    }
  }
  .table-box {
    .table-edit {
      display: flex;
      width: 100%;
      justify-content: space-around;
      span {
        cursor: pointer;
        color: #3482ff;
        font-weight: 500;
      }
      .noClick{
        pointer-events: none;
        color: #182838;
      }
    }
    .activeLi {
      color: rgba(52, 130, 255, 1);
    }
    p.active{
      margin: 0;
    }
    .timeList {
      display: flex;
      margin: 0;
      li {
        flex: 1;
      }
    }
  }
}
</style>
